<template>
	<view>
		<view class="banner">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="item in picture">
						<view class="swiper-item">
							<image :src="$enviorment + item.mendian_picture" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="info">
			<view class="name">
				{{company.mendian_name}}
			</view>
			<view class="label_box">
				<text v-if="company.mendian_tese">{{company.mendian_tese}}</text>
			</view>
			<view class="item">
				<view class="first">
					营业时间 {{company.kssj}}-{{company.jssj}}
				</view>
				<view class="second">
					<text>
						<image src="../static/index_01.png" mode="widthFix" style="width: 18rpx;height: 18rpx;"></image>{{company.num_dingdan}}单
					</text>
					<text>
						<image src="../static/index_02.png" mode="widthFix" style="width: 22rpx;height: 18rpx;"></image>{{company.num_pingjia}}评价
					</text>
				</view>
				<image class="icon" src="../static/shopDetail_02.png" mode="widthFix" @click="call(company.mendian_tel)"></image>
			</view>
			<view class="item">
				<view class="first">{{company.mendian_address}}
				</view>
				<view class="second">
					<text>
						<image src="../static/index_03.png" mode="widthFix" style="width: 18rpx;height: 22rpx;position: relative;top: 4rpx;"></image>{{way}}km
					</text>
				</view>
				<image class="icon" src="../static/shopDetail_01.png" @click="getCenterLocation" mode="widthFix" style="width: 38rpx;right: 35rpx;"></image>
				<!-- <view>
				  <map id="userMap" show-location />
				</view> -->
			</view>
		</view>
		<view class="tc">
			<view class="title">
				服务套餐
			</view>
			<view class="item clearfix" v-for="item in taocan" @click="toDetail(item.item_id)">
				<image :src="$enviorment + item.item_picture" mode="widthFix" class="left"></image>
				<view class="right">
					<view class="name">
						{{item.item_name}}
					</view>
					<view class="price">
						<text>￥{{item.item_price_zfb}}</text>
						<text class="old">原价:￥{{item.item_price_shichang}}</text>
						<view class="btn">购买</view>
					</view>
				</view>
			</view>
		</view>

		<view class="pj">
			<view class="title">
				门店评价 <text class="tousu" @click="toTousu">我要投诉</text>
			</view>
			<view class="item clearfix" v-for="item in pinjia">
				<!-- <image src="../static/index_03.png" mode="widthFix" class="left"></image> -->
				<view class="right">
					<view class="name">
						{{item.pj_name}} {{item.pj_phone}}
						<text class="fr">{{item.pj_riqi}}</text>
					</view>
					<view class="pf">
						<view class="rate_box">
							<sx-rate :value="Number(item.pj_score)" disabled />
						</view>
						<text class="num">{{item.pj_score}}分</text>
					</view>
					<view class="price uni-ellipsis">
						{{item.pj_memo}}
					</view>
				</view>
			</view>
		</view>
		<view class="jj">
			<view class="title">门店简介</view>
			<view class="text">{{company.beizhu}}</view>
		</view>
	</view>
</template>

<script>
	import SxRate from '@/components/sx-rate'
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				shopId: "",
				$enviorment: this.$enviorment,
				shopList: [],
				company: {},
				picture: [],
				pinjia: [],
				taocan: [],
				way: 0,
			}
		},
		components: {
			SxRate
		},
		onLoad(option) {
			console.log(option);
			this.shopId = option.id;
			this.way = option.way;
			this.getDetail()
		},
		// onReady(e) {
		// // 使用 my.createMapContext 获取 map 上下文
		// this.mapCtx = my.createMapContext('userMap')
		//  },
		methods: {
			getCenterLocation() {
				var arr = bd09togcj02(this.company.gpsy, this.company.gpsx);
				console.log(arr)
				uni.openLocation({
					latitude: arr[0], //要去的纬度-地址       
					longitude: arr[1], //要去的经度-地址
					name: this.company.mendian_name, //地址名称
					address: this.company.mendian_address, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			toTousu() {
				uni.navigateTo({
					url: '/pages/advice/advice?id=' + this.shopId
				})
			},
			//套餐详情
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/productDetail?id=' + id
				})
			},
			//拨打电话
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.detail.value
			},
			durationChange(e) {
				this.duration = e.detail.value
			},
			getDetail() {
				this.$get('mendian_info.ashx', {
					mendian_id: this.shopId
				}, (res) => {
					var res = res.data
					if (res.company) {
						var company = JSON.parse(res.company)
						this.company = company[0];
					}
					if (res.picture.length) {
						var picture = JSON.parse(res.picture)
						this.picture = picture
					}
					if (res.pinjia.length) {
						var pinjia = JSON.parse(res.pinjia)
						this.pinjia = pinjia
					}
					if (res.taocan.length) {
						var taocan = JSON.parse(res.taocan)
						this.taocan = taocan
					}
				})
			}
		}
	}

	var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
	var PI = 3.1415926535897932384626;
	var a = 6378245.0;
	var ee = 0.00669342162296594323;
	/**
	 * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
	 * 即 百度 转 谷歌、高德
	 */
	function bd09togcj02(bd_lon, bd_lat) {
		var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
		var x = bd_lon - 0.0065;
		var y = bd_lat - 0.006;
		var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
		var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
		var gg_lng = z * Math.cos(theta);
		var gg_lat = z * Math.sin(theta);
		return [gg_lng, gg_lat]
	}
</script>

<style scoped>
	.swiper {
		height: 380rpx;
	}

	.swiper-item {
		display: block;
		height: 380rpx;
		line-height: 380rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.info {
		margin-top: 20rpx;
		padding: 36rpx 20rpx;
		background-color: #fff;
	}

	.info .name {
		font-size: 36rpx;
		line-height: 36rpx;
	}

	.info .label_box text {
		font-size: 22rpx;
		line-height: 24rpx;
		color: #fff;
		border-radius: 24rpx;
		margin-right: 20rpx;
		background-color: #ff8c36;
		padding: 0 20rpx;
	}

	.info .item {
		border-bottom: 1px solid #E5E5E5;
		position: relative;
		padding: 10rpx 0;
	}

	.info .item .first {
		font-size: 24rpx;
	}

	.info .item .second {
		font-size: 24rpx;
		color: #999999;

	}

	.info .item .second text {
		margin-right: 20rpx;
	}

	.info .item .second text image {
		margin-right: 10rpx;
	}

	.info .item .icon {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 30rpx;
		top: 24rpx;
	}

	.title {
		font-size: 28rpx;
		padding-top: 24rpx;
		padding: 24rpx;
	}

	.tc {
		background-color: #FFFFFF;
		padding: 0 24rpx;
		margin-top: 20rpx;
	}

	.tc .left {
		float: left;
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
	}

	.tc .item {
		border-bottom: 1px solid #E5E5E5;
		padding: 30rpx 0;
	}

	.tc .right {
		box-sizing: border-box;
		padding-left: 25rpx;
		float: left;
		width: calc(100% - 120rpx);
		position: relative;
	}

	.tc .right .name {
		font-size: 32rpx;
	}

	.tc .right .price {
		color: #FF6010;
		font-size: 36rpx;
	}

	.tc .right .price .old {
		font-size: 24rpx;
		color: #999999;
		margin-left: 10rpx;
	}

	.tc .right .btn {
		width: 120rpx;
		height: 52rpx;
		background: rgba(255, 223, 199, 1);
		border-radius: 26rpx;
		line-height: 52rpx;
		text-align: center;
		color: #FF8C36;
		font-size: 26rpx;
		position: absolute;
		right: 0rpx;
		top: 32rpx;
	}

	.jj {
		font-size: 24rpx;
		line-height: 36rpx;
		background-color: #fff;
		margin-top: 20rpx;
		padding-bottom: 24rpx;
	}

	.jj .text {
		padding: 24rpx;
	}

	.pj {
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.pj .left {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		float: left;
	}

	.pj .item {
		padding: 24rpx;
	}

	.pj .right {
		float: left;
		width: calc(100% - 64rpx);
		box-sizing: border-box;
		padding-left: 20rpx;
	}

	.pj .right .name {
		font-size: 24rpx;
	}

	.pj .right .name .fr {
		float: right;
		color: #999999;
	}

	.pj .right .pf .num {
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #FF770D;
	}

	.pj .right .rate_box {
		display: inline-block;
	}

	.label_box {
		height: 50rpx;
	}

	.tousu {
		float: right;
		color: #999999;
		font-size: 22rpx;
	}
</style>
